<template>
    <!-- <el-input v-model="queryParam.username" style="width: 240px" placeholder="会员查询" /> -->
    <el-input v-model="queryParam.nickName" style="width: 240px" placeholder="昵称" />
    <el-input v-model="queryParam.receiverName" style="width: 240px" placeholder="收货人姓名查询" />
    <el-button type="primary" @click="queryPage()">搜索</el-button>
    <br />
    <br />


    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="username" label="会员" />
        <el-table-column prop="nickName" label="昵称" />
        <el-table-column prop="orderNo" label="订单号" />
        <el-table-column prop="skuName" label="商品名称" />
        <el-table-column prop="totalAmount" label="订单总额" />
        <el-table-column label="支付方式">
            <template #default="scope">
                <el-button type="warning" plain v-if="scope.row.payType === 1">微信</el-button>
                <el-button type="danger" plain v-if="scope.row.payType === 2">支付宝</el-button>
            </template>
        </el-table-column>
        <el-table-column label="订单状态">
            <template #default="scope">
                <el-button type="primary" plain v-if="scope.row.orderStatus === 0">待付款</el-button>
                <el-button type="warning" plain v-if="scope.row.orderStatus === 1">待发货</el-button>
                <el-button type="warning" plain v-if="scope.row.orderStatus === 2">已发货</el-button>
                <el-button type="warning" plain v-if="scope.row.orderStatus === 3">待用户收货</el-button>
                <el-button type="danger" plain v-if="scope.row.orderStatus === -1">已拒绝</el-button>
            </template>
        </el-table-column>
        <el-table-column prop="receiverName" label="收货人姓名" />
        <el-table-column prop="receiverPhone" label="收货人电话" />
        <el-table-column prop="receiverAddress" label="收货人地址" />
        <el-table-column prop="deliveryTime" label="发货时间" />
        <el-table-column label="自动确认收货时间">
            <template #default="scope">
                <span v-if="scope.row.orderStatus === 2">15天</span>
                <span v-else></span>
            </template>
        </el-table-column>
        <el-table-column prop="remark" label="订单备注" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" plain @click="handleEdit(scope.row.id)" v-if="scope.row.orderStatus === 1">发货</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="queryParam.pageNum" v-model:page-size="queryParam.pageSize"
            :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="queryParam.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup>
import {  updateOrderStatus, selectOrder } from '@/api/orderInfo';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

// 定义表格数据
const tableData = ref([]); // 初始化为空数组

// 定义分页相关变量
const queryParam = ref({
    pageNum: 1,
    pageSize: 10,
    username:'',
    nickName:'',
    receiverName:'',
    total:''
});

// 定义模糊方法
function queryPage() {
    selectOrderInfo()
}



const handleSizeChange = (newPageSize) => {
    queryParam.value.pageSize = newPageSize;
    selectOrderInfo()
};

const handleCurrentChange = (newPageNum) => {
    queryParam.value.pageNum = newPageNum;
    selectOrderInfo()
};

// 获取表格数据
// function findAll() {
//     selectAllOrder(queryParam.value).then((res) => {
//         tableData.value = res.data.records;
//         total.value = res.data.total;
//     });
// }

// findAll();

function selectOrderInfo() {
    selectOrder(queryParam.value).then((res) => {        
        tableData.value = res.data.list,
        queryParam.value.total = res.data.total
    });
}

selectOrderInfo()
// 处理发货操作
function handleEdit(row) {
    updateOrderStatus(row).then(res=>{
        if (res.code==200) {
            ElMessage.success(res.message)
            selectOrderInfo()
        } else {
            ElMessage.error(res.message)
            selectOrderInfo()
        }
    })
}
</script>